<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      :title="num"
      left-arrow
      @click-left="$parent.$parent.show2 = false"
    />
    <!-- 渲染当前评论 -->
    <van-cell class="comment-item">
      <template #icon>
        <van-image round :src="item.aut_photo" />
      </template>
      <template #title>
        <div class="comment-title">
          <div class="user-name">{{ item.aut_name }}</div>
          <van-button class="like-btn" icon="good-job-o" size="mini">
            赞
          </van-button>
        </div>
        <div class="comment-content">{{ item.content }}</div>
        <div class="comment-bottom">
          <span>{{ item.pubdate }}</span>
          <van-button round class="reply-btn">
            回复{{ item.reply_count }}
          </van-button>
        </div>
      </template>
    </van-cell>

    <van-divider>全部回复</van-divider>

    <!-- 回复评论 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
    >
      <van-cell
        class="comment-item"
        v-for="item in Commentslist"
        :key="item.com_id"
      >
        <template #icon>
          <van-image round :src="item.aut_photo" />
        </template>
        <template #title>
          <div class="comment-title">
            <div class="user-name">{{ item.aut_name }}</div>
            <van-button class="like-btn" icon="good-job-o" size="mini">
              赞
            </van-button>
          </div>
          <div class="comment-content">{{ item.content }}</div>
          <div class="comment-bottom">
            <span>{{ item.pubdate }}</span>
            <van-button round class="reply-btn">
              回复{{ item.reply_count }}
            </van-button>
          </div>
        </template>
      </van-cell>
    </van-list>

    <van-button type="primary" block class="post-comment-btn" @click="showPopup"
      >发布评论</van-button
    >
    <van-popup v-model="show" position="bottom" :style="{ height: '18%' }">
      <!-- 显示内容 -->
      <div class="comment-post">
        <van-field
          v-model="messageee"
          rows="2"
          autosize
          type="textarea"
          maxlength="50"
          placeholder="请输入留言"
          show-word-limit
        />
        <van-button
          type="info"
          size="mini"
          class="btntn"
          @click="AddcommentsAPI"
          >发布</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getCommentsAPI, AddCommentsAPI } from '@/api'
export default {
  props: ['item', 'id'],
  computed: {
    num() {
      return this.item.reply_count
        ? this.item.reply_count + '个回复'
        : '暂无回复'
    }
  },
  data() {
    return {
      show: false,
      messageee: '',
      Commentslist: {},
      loading: false,
      finished: false,
      error: false,
      params: {
        type: 'c',
        source: this.item.com_id,
        offset: '',
        limit: 10
      }
    }
  },
  created() {
    this.getCommentsAPI()
  },
  methods: {
    // //? 获取评论列表
    async getCommentsAPI() {
      const { data } = await getCommentsAPI(this.params)
      this.Commentslist = data.data.results
      this.params.offset = data.data.last_id
      // console.log(data)
      // console.log(this.Commentslist)
    },
    //? 滚动加载评论列表
    async getcomments() {
      try {
        const { data } = await getCommentsAPI(this.params)
        console.log(data)
        if (data.data.results.length < 10) {
          //? 数据加载完成
          this.finished = true
        } else {
          this.params.offset = data.data.last_id
          this.Commentslist.push(...data.data.results)
        }
      } catch (error) {
        this.error = true
      } finally {
        this.loading = false
      }
    },
    //? 添加评论
    async AddcommentsAPI() {
      const data = {
        target: this.item.com_id,
        content: this.messageee,
        art_id: this.id
      }
      const list = await AddCommentsAPI(data)
      this.Commentslist.unshift(list.data.data.new_obj)
      this.show = false
      this.messageee = ''
      this.getCommentsAPI()
      this.$toast.success('添加评论成功!')
    },
    //? 异步更新数据
    onLoad() {
      this.getcomments()
    },
    showPopup() {
      this.show = true
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.van-list) {
  margin-bottom: 100px;
}
:deep(.post-comment-btn) {
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  color: #666;
}
:deep(.van-button--primary) {
  border: 0.02667rem solid #ebedf0;
}
:deep(.van-button--normal) {
  padding: 0 0.4rem;
  font-size: 0.37333rem;
}
:deep(.comment-item) {
  padding: 0.26667rem 0.42667rem;
  .van-image {
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.33333rem;
  }
  .comment-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-name {
      color: #406599;
      font-size: 0.34667rem;
    }
    .like-btn {
      height: 0.4rem;
      padding: 0;
      border: none;
      font-size: 0.25333rem;
      line-height: 0.4rem;
      margin-right: 0.09333rem;
      .van-icon-good-job-o:before {
        font-size: 0.4rem;
      }
      .van-button--default {
        border: 0;
      }
    }
  }
  .comment-content {
    font-size: 0.42667rem;
    color: #222;
    margin: 0.4rem 0;
  }
  .comment-bottom {
    display: flex;
    align-items: center;
    // color: #969799;
    font-size: 0.32rem;
    line-height: 0.48rem;
    span {
      display: inline-block;
      font-size: 0.25333rem;
      color: #222;
      margin-right: 0.33333rem;
      line-height: 0.25333rem;
    }
    .reply-btn {
      width: 1.8rem;
      height: 0.64rem;
      line-height: 0.64rem;
      font-size: 0.28rem;
      color: #222;
      span {
        margin-right: 0;
      }
    }
  }
}
:deep(.comment-post) {
  display: flex;
  align-items: center;
  padding: 0.42667rem 0 0.42667rem 0.42667rem;
  .van-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0.26667rem 0.42667rem;
    overflow: hidden;
    color: #323233;
    font-size: 0.37333rem;
    line-height: 0.64rem;
    background-color: #f5f7f9;
    .van-field__control {
      display: block;
      box-sizing: border-box;
      width: 100%;
      min-width: 0;
      margin: 0;
      padding: 0;
      color: #323233;
      line-height: inherit;
      text-align: left;
      background-color: transparent;
      border: 0;
      resize: none;
    }
  }
  .btntn {
    width: 2rem;
    border: none;
    padding: 0;
    color: #6ba3d8;
    background-color: #fff;
    font-size: 0.3733rem;
  }
}
</style>
